﻿
 body {font-size:14px;  font-family: Arial, Verdana, sans-serif; }	
	#form-container {float:left; background:white; border:solid 1px #dddddd;  box-sizing:border-box;  width:90%; margin: 40px auto;  border-radius:15px; box-shadow: 0px 2px 25px 2px rgba(0,0,0,0.4);}
	.masterPassForm{padding:30px 10px 10px 30px;}
	header{ float:left; height:95px; width:100%; box-sizing:border-box; padding: 15px; margin-bottom:40px;}
	header .divider{float:left; width:100%; background:#e7e7e7; height:2px; margin:15px 0;}
	h2 {font-weight:normal;} 
	
	.payzone-button-proceed {margin-right: 10px; margin-top: 5px; border-radius: 4px; padding:10px 0; width: 150px;  color:white;}
    #masterpassButton.payzone-button-masterpass {margin-right: 10px; opacity: 0.8; margin-top: 5px; background-image:url(https://static.masterpass.com/dyn/img/btn/global/mp_chk_btn_147x034px.svg); background-size: cover;  border-radius: 4px; width: 154px; height: 36px; border: none; }
	#masterpassButton.payzone-button-masterpass:hover { opacity: 1.0;}
    .payzone-button-back:hover{ opacity: 0.7; }
    .payzone-button-back {margin-right: 10px; margin-top: 5px; border: solid 1px;  background:#ffffff; border-radius: 4px; padding:10px 0; width: 150px; }
	.payzone-button-back:hover{ border-radius: 4px; padding:10px 40px; background: white; color:black !important;}
	.payzone-logo{float:left; height:60px;}
	.company-logo{float:right; border-radius:5px; height: 80px; margin-top:-20px;}
	.details-item {display:inline-block; width:280px; padding: .5em 0;}
	.required label::after{content:' *'; color:red; font-weight:bold; font-size:1.1em;}
	.action-buttons{margin-top:40px;}
	.pure-form .full-width{display:inline-block;}
	.pure-form input[type=text], 
	.pure-form input[type=password], 
	.pure-form input[type=email], 
	.pure-form input[type=tel],  
	.pure-form .full-width,
	.pure-form .details-item,
	.pure-form textarea { width:180px;}
	.pure-form .half-width {width:49%;}
    .pure-form input[type=text].expiryDate{ width: 120px; margin-right: 60px;}
    #main label {text-align: left;  width: 150px; margin-bottom:0.3em;} 
     #main .cvv-field{ width: 70px; margin-right: 110px;}
	.pure-form input:focus:invalid, 
	.pure-form textarea:focus:invalid, 
	.pure-form select:focus:invalid { color: inherit; border-color: #cccccc;}
    input::-webkit-input-placeholder{ color: #d9d9d9;}
    input::-moz-placeholder{ color: #d9d9d9;}
    input:-moz-placeholder{ color: #d9d9d9;}
    input:-ms-input-placeholder { color: #d9d9d9;}
    #payment-description{ font-size: 13px; margin-top: 30px; font-style: italic;}
    fieldset { border: none;}
    #divStartDate{ display: none;}
    #divExplainSecurityCode{ display: none;} 
    #applePay{ display: none;}
    #cvv-helper-icon{ display: inline-block; width: 16px; height: 16px; border-radius: 8px; margin-left: 5px; cursor: pointer;  border: solid 1px #cccccc; background: #cccccc; color: #ffffff; text-align: center;font-weight: bold;}
    #cvv-helper-icon::selection{ background: transparent;}
    #explain-cvv{ display: none; font-size: 13px; color:#444444; background: none;  margin-top: 12px;}
    #payment-logos{ text-align: right; display: inline-block; width: 174px;}
    .dynamic-card { height: 25px; margin-left: 3px; opacity: 0.3;}
    #main .payment-total{ font-size: 22px; padding-bottom: 15px; margin-bottom: 0px;}
    .currency-display{ padding: 0; margin: 0 0 5px 0;}
    .error { color: red;}
    .has-error input { border-width: 2px;}
    .validation.text-danger:after { content: 'Validation failed'; }
    .validation.text-success:after { content: 'Validation passed';}

    .pleaseWaitSpinnerContainer { position: fixed;  top: 0; left: 0; text-align: center; padding-top: 300px; width: 100%; height: 100%; background-color: black; opacity: 0.75; z-index: 2000;}
    #masterpassButton {margin: 0px; padding: 0px; border: none;}
    #masterpassLogo { width: 147px; height: 34px; margin: 0px; padding: 0px; border: none;}

    #divSubmitContents {float: left; margin-bottom: 10px;}
    .lightBoxButtons{width: 50%; float: left;}
    .masterpass-learnmore-link{ width: 70%; float: left; font-size: 0.75em; color: #ea914b;}
    .secure-3d-message-lightbox{font-size: 12px; margin-top: 0;}

	@media screen and (max-width: 409px) {
	#transaction-details label {font-weight:bold; color:#444444; margin-bottom:0.1em;}
	.action-buttons .right{margin-top:10px;}
    .small-field-container{ float: left; width: 40%; margin-right: 15px;}
    .pure-form input[type=text], 
	.pure-form input[type=password], 
	.pure-form input[type=email], 
	.pure-form input[type=tel],  
	.pure-form .full-width,
	.pure-form .details-item,
	.pure-form textarea { display: block; margin-bottom: 2px; font-size: 16px; }
    .pure-form-aligned .pure-control-group label { display: block; margin-bottom:0.3em;}
    .payzone-button-proceed { width: 95%; margin-bottom: 3px;}
    .payzone-button-back {width: 95%; margin-bottom: 3px;}
    #masterpassButton.payzone-button-masterpass{ width: 170px; height: 40px;}
    .pure-form input[type=text] { width: 95%; font-size: 16px;}
    #payment-logos{ width: 95%;}
    .lightBoxButtons{width: 179px; }
    .masterpass-learnmore-link{ width: 179px; }
  }
